<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="ul">
        <li class="li-1">li_1</li>
        <li class="li-2">li_2</li>
        <li class="li-3">li_3</li>
        <li class="li-4">li_4</li>
        <li class="li-5">li_5</li>
    </ul>
    <button class="btn">添加</button>

    <script>
        var ul = document.querySelector('.ul');
        var btn  = document.querySelector('.btn');

        // 动态添加li
        btn.onclick = function () {
            var lis = document.querySelectorAll('li');
            var index = lis.length + 1;
            var newLi = document.createElement('li');
            newLi.classList.add('li_' + index);
            newLi.innerHTML = 'li_' + index;
            ul.appendChild(newLi);
        }
        // 事件委托
        ul.onclick = function () {
            // 事件的触发者的标签名称 target是事件触发者 current是事件绑定者
            if (event.target.tagName === 'LI') {
                console.log(event.target.innerHTML);
            }
        }
    </script>
</body>
</html>